<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item prop="plotId" label="选择小区：">
        <el-select v-model="queryParams.plotId" placeholder="请选择小区名称" clearable style="width: 200px">
          <el-option v-for="dict in xiaoquData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="buildId" label="选择楼栋：">
        <el-select v-model="queryParams.buildId" placeholder="请选择楼栋" clearable style="width: 200px">
          <el-option v-for="dict in loudongData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="unitId" label="选择单元：">
        <el-select v-model="queryParams.unitId" placeholder="请选择单元" clearable style="width: 200px">
          <el-option v-for="dict in danyuanData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期：">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom: 10px;display: flex;justify-content: space-between;">
      <div>
        <el-button type="primary" size="mini" icon="el-icon-refresh" @click="piliangHuiFu">批量恢复</el-button>
        <el-button type="primary" size="mini" icon="el-icon-circle-close" @click="piliangDel">批量删除</el-button>
      </div>

      <div>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="showSearch = !showSearch"></el-button>
        <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click="getList"></el-button>
      </div>

    </div>

    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
      <el-table-column v-if="selectFlag" type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index"></el-table-column>
      <el-table-column show-overflow-tooltip label="所属小区" align="center" prop="plotName" />
      <el-table-column show-overflow-tooltip label="存档类型" align="center" prop="thermalPower"></el-table-column>
      <el-table-column show-overflow-tooltip label="存档详情" align="center" prop="velocityFlow"></el-table-column>
      <el-table-column show-overflow-tooltip label="存档备注" align="center" prop="waterSupplyTemperature" />
      <el-table-column show-overflow-tooltip label="存档人" align="center" prop="returnWaterTemperature"></el-table-column>
      <el-table-column show-overflow-tooltip label="存档时间" align="center" prop="totalFlow"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="chakan(scope.row)">查看</el-button>
          <el-button size="mini" type="text" @click="huifu(scope.row)">恢复</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog title="查看" :visible.sync="dialogOpen" width="500px">
      <div style="display: flex;align-items: center;margin: 5px 0;">
        <div style="width: 100px;">小区：</div><el-input disabled v-model="form.plotName" placeholder=""></el-input>
      </div>
      <div style="display: flex;align-items: center;margin: 5px 0;" v-if="form.thermalPower === '楼栋' ||form.thermalPower === '单元'">
        <div style="width: 100px;">楼栋：</div><el-input disabled v-model="form.loudong" placeholder=""></el-input>
      </div>
      <div style="display: flex;align-items: center;margin: 5px 0;" v-if="form.thermalPower === '单元'">
        <div style="width: 100px;">单元：</div><el-input disabled v-model="form.danyuan" placeholder=""></el-input>
      </div>
      <div style="display: flex;align-items: center;margin: 5px 0;">
        <div style="width: 100px;">阀门开度：</div><el-input disabled v-model="form.open" placeholder=""></el-input>
      </div>
      <div style="display: flex;align-items: center;margin: 5px 0;">
        <div style="width: 100px;">存档时间：</div><el-input disabled v-model="form.totalFlow" placeholder=""></el-input>
      </div>
      <div style="display: flex;align-items: center;margin: 5px 0;">
        <div style="width: 100px;">存档备注：</div><el-input disabled type="textarea" v-model="form.waterSupplyTemperature"
          placeholder=""></el-input>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import data5 from '@/utils/data5.json'

export default {
  data() {
    return {
      form: {
        plotName: null,
        open: null,
        totalFlow: null,
        waterSupplyTemperature: null
      },
      dialogOpen: false,
      selectFlag: false,
      showSearch: true,
      xiaoquData: [],
      loudongData: [],
      danyuanData: [],
      total: 0,
      loading: false,
      queryParams: {
        buildId: null,
        plotId: null,
        unitId: null,
        startTime: null,
        endTime: null,
        pageNum: 1,
        pageSize: 10,
        // longdongValue: null,
        // danyuanValue: null,
        // xiaoquValue: null,
      },
      typeList: [
        { plotName: '花间苑', thermalPower: '小区', velocityFlow: '花间苑', waterSupplyTemperature: '5-18 系统维护备份', returnWaterTemperature: '吴迪', totalFlow: '2023-05-18 11:20:48', open: 9,loudong:'楼栋一',danyuan:'1单元' },
        { plotName: '暮辞小镇', thermalPower: '小区', velocityFlow: '暮辞小镇', waterSupplyTemperature: '备注', returnWaterTemperature: '吴迪', totalFlow: '2023-04-18 12:20:00', open: 8,loudong:'楼栋三',danyuan:'4单元' },
        { plotName: '安寐轩', thermalPower: '单元', velocityFlow: '安寐轩-2栋-1单元', waterSupplyTemperature: '无', returnWaterTemperature: '吴迪', totalFlow: '2023-04-12 12:20:30', open: 9 ,loudong:'楼栋一',danyuan:'2单元'},
        { plotName: '疆野别墅', thermalPower: '楼栋', velocityFlow: '疆野别墅', waterSupplyTemperature: '系统维护备份', returnWaterTemperature: '吴迪', totalFlow: '2023-03-18 12:20:06', open: 7,loudong:'楼栋二',danyuan:'1单元' },
        { plotName: '留宸园', thermalPower: '单元', velocityFlow: '留宸园-2栋-1电影', waterSupplyTemperature: '系统维护备份', returnWaterTemperature: '吴迪', totalFlow: '2023-04-18 22:10:01',open:8,loudong:'楼栋一',danyuan:'5单元' },
        { plotName: '天悦龙庭', thermalPower: '小区', velocityFlow: '天悦龙庭', waterSupplyTemperature: '无', returnWaterTemperature: '吴迪', totalFlow: '2023-06-08 12:20:52', open: 8,loudong:'楼栋一',danyuan:'1单元' },
        { plotName: '芋烤中心', thermalPower: '单元', velocityFlow: '芋烤中心-1栋-1单元', waterSupplyTemperature: '临时维护备份', returnWaterTemperature: '吴迪', totalFlow: '2023-04-10 12:20:10', open: 9,loudong:'楼栋一',danyuan:'3单元' },
      ],
      ids: [],
      dateRange: [],
    }
  },
  created() {
   
  },
  methods: {
    // 搜索
    handleQuery() {
      if (this.dateRange.length !== 0) {
        this.queryParams.startTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      } else {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }
    },
    // 数据查看
    chakan(row) {
      this.dialogOpen = true
      this.form = row
      console.log(row);
    },
    //重置
    resetQuery() {
      this.dateRange = []
      this.resetForm("queryForm");
    },
    // 操作栏，单个删除
    handleDelete(row) {
      this.$modal.confirm('是否删除所选数据？删除后不可恢复。').then(function () {
        // return delType(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictId)
      // console.log(this.ids);
    },
    // 恢复(单个)
    huifu(row) {
      console.log(row);
      this.$modal.confirm('确定要恢复此条数据吗？恢复后将按照此设定更新数据。').then(function () {
        // return delType(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("恢复成功");
      }).catch(() => { });
    },
    // 批量删除
    piliangDel() {
      if (this.ids.length === 0) {
        this.selectFlag = !this.selectFlag
      } else {
        this.$modal.confirm('是否删除所选数据？').then(function () {
          // return delCustommodel(ids);
        })
      }
    },
    // 批量恢复
    piliangHuiFu() {
      if (this.ids.length === 0) {
        this.selectFlag = !this.selectFlag
      } else {
        this.$modal.confirm('确定要恢复选中的数据吗？恢复后将按照此更新数据。').then(function () {
          // return delType(row.id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("批量恢复成功");
        }).catch(() => { });
      }
    },
    //获取列表数据
    getList() {
      this.loading = false
    }
  },
}
</script>

<style lang="scss" scoped></style>
